<template>
  <view :data-theme="theme">
    <view class='integral-details'>
      <view class='header'>
        <view class='currentScore'>当前积分</view>
        <view class="scoreNum">{{ integral.integral || 0 }}</view>
        <view class='line'></view>
        <view class='nav acea-row'>
          <view class='item'>
            <view class='num'>{{ integral.settledIntegral || 0 }}</view>
            <view>累计积分</view>
          </view>
          <view class='item'>
            <view class='num'>{{ integral.useIntegral || 0 }}</view>
            <view>累计消费</view>
          </view>
          <view class='item'>
            <view class='num'>{{ integral.freezeIntegral || 0 }}</view>
            <view>冻结积分</view>
          </view>
        </view>
      </view>
      <view class='wrapper'>
        <view class='nav acea-row'>
          <view class='item acea-row row-center-wrapper' :class='current==index?"on":""' v-for="(item,index) in navList"
                :key='index'
                @click='nav(index)'>
            <text class='iconfont' :class="item.icon"></text>
            {{ item.name }}
          </view>
        </view>
        <view class='list' :hidden='current!=0'>
          <view class='item acea-row row-between-wrapper' v-for="(item,index) in integralList" :key="index">
            <view>
              <view class='state'>{{ item.title }}</view>
              <view>{{ item.updateTime }}</view>
            </view>
            <view class='num font_color' v-if="item.type===1">+{{ item.integral }}</view>
            <view class='num' v-else>-{{ item.integral }}</view>
          </view>
          <view class='loadingicon acea-row row-center-wrapper' v-if="integralList.length>0">
            <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
            {{ loadTitle }}
          </view>
          <view class='noCart' v-if="integralList.length == 0">
            <view class='pictrue'>
              <image :src="urlDomain+'crmebimage/presets/noJilu.png'"></image>
              <view class="default_txt">暂无积分记录哦~</view>
            </view>
          </view>
        </view>
        <view class='list2' :hidden='current!=1'>
          <navigator class='item acea-row row-between-wrapper' open-type='switchTab' hover-class='none'
                     url='/pages/index/index'>
            <view class='pictrue'>
              <image src='../static/images/score.png'></image>
            </view>
            <view class='name'>购买商品可获得积分奖励</view>
            <view class='earn'>赚积分</view>
          </navigator>
          <navigator class='item acea-row row-between-wrapper' hover-class='none' url='/pages/merchant/user_sgin/index'>
            <view class='pictrue'>
              <image src='../static/images/score.png'></image>
            </view>
            <view class='name'>每日签到可获得积分奖励</view>
            <view class='earn'>赚积分</view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {postIntegralUser, getIntegralList} from '@/api/user.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";

let app = getApp();
export default {
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      navList: [{
        'name': '分值明细',
        'icon': 'icon-mingxi'
      },
        {
          'name': '分值提升',
          'icon': 'icon-tishengfenzhi'
        }
      ],
      current: 0,
      page: 1,
      limit: 10,
      integralList: [],
      integral: {},
      loadend: false,
      loading: false,
      loadTitle: '加载更多',
      theme: app.globalData.theme,
    };
  },
  computed: mapGetters(['isLogin']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getUserInfo();
          this.getIntegralList();
        }
      },
      deep: true
    }
  },
  onLoad() {
    if (this.isLogin) {
      this.getUserInfo();
      this.getIntegralList();
    } else {
      toLogin();
    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getIntegralList();
  },
  methods: {
    getUserInfo: function () {
      let that = this;
      postIntegralUser().then(function (res) {
        that.$set(that, 'integral', res.data);
      });
    },

    /**
     * 获取积分明细
     */
    getIntegralList: function () {
      let that = this;
      if (that.loading) return;
      if (that.loadend) return;
      that.loading = true;
      that.loadTitle = '';
      getIntegralList({
        page: that.page,
        limit: that.limit
      }).then(function (res) {
        let list = res.data.list,
            loadend = list.length < that.limit;
        that.integralList = that.$util.SplitArray(list, that.integralList);
        that.$set(that, 'integralList', that.integralList);
        that.page = that.page + 1;
        that.loading = false;
        that.loadend = loadend;
        that.loadTitle = loadend ? '哼~😕我也是有底线的~' : "加载更多";
      }, function (res) {
        this.loading = false;
        that.loadTitle = '加载更多';
      });
    },
    nav: function (current) {
      this.current = current;
    }
  }
}
</script>

<style scoped lang="scss">
.integral-details .header {
  background-image: url('');
  background-repeat: no-repeat;
  background-size: 100% 218rpx;
  background-position: center bottom;
  width: 100%;
  height: 460rpx;
  font-size: 72rpx;
  color: #fff;
  padding: 31rpx 0 45rpx 0;
  box-sizing: border-box;
  text-align: center;
  font-family: 'Guildford Pro';
  //@include main_bg_color(theme);
  background-color: #8B4513;

}

.integral-details .header .currentScore {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 11rpx;
}

.integral-details .header .scoreNum {
  font-family: "Guildford Pro";
}

.integral-details .header .line {
  width: 60rpx;
  height: 3rpx;
  background-color: #fff;
  margin: 20rpx auto 0 auto;
}

.integral-details .header .nav {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  margin-top: 35rpx;
}

.integral-details .header .nav .item {
  width: 33.33%;
  text-align: center;
}

.integral-details .header .nav .item .num {
  color: #fff;
  font-size: 40rpx;
  margin-bottom: 5rpx;
  font-family: 'Guildford Pro';
}

.integral-details .wrapper .nav {
  flex: 1;
  width: 690rpx;
  border-radius: 20rpx 20rpx 0 0;
  margin: -96rpx auto 0 auto;
  background-color: #f7f7f7;
  height: 96rpx;
  font-size: 30rpx;
  color: #bbb;
}

.integral-details .wrapper .nav .item {
  text-align: center;
  width: 50%;
}

.integral-details .wrapper .nav .item.on {
  background-color: #fff;
  //@include main-color(theme);
  color: #8B4513;
  font-weight: bold;
  border-radius: 20rpx 0 0 0;
}

.integral-details .wrapper .nav .item:nth-of-type(2).on {
  border-radius: 0 20rpx 0 0;
}

.integral-details .wrapper .nav .item .iconfont {
  font-size: 38rpx;
  margin-right: 10rpx;
}

.integral-details .wrapper .list {
  background-color: #fff;
  padding: 24rpx 30rpx;
}

.integral-details .wrapper .list .tip {
  font-size: 25rpx;
  width: 690rpx;
  height: 60rpx;
  border-radius: 50rpx;
  background-color: #fff5e2;
  border: 1rpx solid #ffeac1;
  color: #c8a86b;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-bottom: 24rpx;
}

.integral-details .wrapper .list .tip .iconfont {
  font-size: 35rpx;
  margin-right: 15rpx;
}

.integral-details .wrapper .list .item {
  height: 124rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 24rpx;
  color: #999;
}

.integral-details .wrapper .list .item .state {
  font-size: 28rpx;
  color: #282828;
  margin-bottom: 8rpx;
}

.integral-details .wrapper .list .item .num {
  font-size: 36rpx;
  font-family: 'Guildford Pro';
}

.integral-details .wrapper .list2 {
  background-color: #fff;
  padding: 24rpx 0;
}

.integral-details .wrapper .list2 .item {
  background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
  width: 690rpx;
  height: 180rpx;
  position: relative;
  border-radius: 10rpx;
  margin: 0 auto 20rpx auto;
  padding: 0 25rpx 0 180rpx;
  box-sizing: border-box;
}

.integral-details .wrapper .list2 .item .pictrue {
  width: 90rpx;
  height: 150rpx;
  position: absolute;
  bottom: 0;
  left: 45rpx;
}

.integral-details .wrapper .list2 .item .pictrue image {
  width: 100%;
  height: 100%;
}

.integral-details .wrapper .list2 .item .name {
  width: 285rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #c8a86b;
}

.integral-details .wrapper .list2 .item .earn {
  font-size: 26rpx;
  color: #c8a86b;
  border: 2rpx solid #c8a86b;
  text-align: center;
  line-height: 52rpx;
  height: 52rpx;
  width: 160rpx;
  border-radius: 50rpx;
}

.font_color {
  @include price_color(theme);
}

.noCart {
  margin-top: -62rpx;
  padding-top: 0.1rpx;
  height: 800rpx;
}

.noCart .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
  width: 100%;
  height: 100%;
}

.default_txt {
  font-size: 26rpx;
  color: #999;
  text-align: center;
}

.list {
  min-height: 72vh;
}
</style>
